<template>
    <div class="page dealEmergencyApply-page" data-page="answer">
        <div class="link-page-nav">
            <span class="link" @click=$root.backToTab()>
                <i class=" iconfont icon-APPicon_guanbi" style="font-size: 16px;"></i>
            </span>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">查看答案
                <p class="result-name">考试名称考试名称考试名称考试名称</p>
            </div>
        </div>
        <div class="page-content">
            <div class="exam-content">
                <div class="exam-details" id="exam-result_{{getNewId}}">
                </div>
                <div class="look-answer"><button @click="lookDeatils">查看答案</button></div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                total: 20,
                activeIndex: 1,
                swiper: {},
                getNewId: (new Date()).getTime(),
            }
        },
        mounted() {
            let u = navigator.userAgent;
            let self = this;
            let params = { examDetailId: this.$route.params.id }
            let timej;
            let detailEndTime ;
            let maxtime ;
            Dao.getExamDetailById(params, function (res) {
                if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
                         dateNow = new Date(res.detailBeginTime.replace(/-/g, '/'));
                         detailEndTime = new Date(res.detailEndTime.replace(/-/g, '/'))
                         timej=detailEndTime.getTime() - dateNow.getTime()
                         maxtime = Math.abs(timej) / 1000;
                        
                }else{
                     dateNow = new Date(res.detailBeginTime);
                     detailEndTime = new Date(res.detailEndTime)
                     timej=detailEndTime.getTime() - dateNow.getTime()
                     maxtime = Math.abs(timej) / 1000;
                }
               
                // 倒计时
                var minute = parseInt(maxtime / 60);
                var second = parseInt(maxtime % 60);
                jQuery('.result-name').text(res.name)
                jQuery(`#exam-result_${self.getNewId}`).html(
                    ` <img src="${userInfor.headUrl == '' ? staticPath + 'img/mine/defaulticon.png' : userInfor.headUrl}" alt="">
                    <p class="exam-name">${userInfor.name}</p>
                    <div class="exam-total ${res.passLine <= res.score?'passcolor':'nopasscolor'} "><span>${res.score}</span>分</div>
                    <div class="exam-result">
                        <div><p>考试用时</p>
                            <p>${   (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}</p>
                            
                        </div>
                        <div><p>考试结果</p>
                            <p class="${res.passLine <= res.score?'passcolor':'nopasscolor'}">${res.score >= res.passLine ? '及格' : '不及格'}</p>
                            
                        </div>
                        <div id="goRanking"> <p>考试排名</p>
                            <p>${res.ranking}></p>
                           
                        </div>
                    </div>`
                )
                let examId = res.examId
                jQuery(`#exam-result_${self.getNewId}`).on('click', '#goRanking', function () {
                    app.router.navigate(`/rankingList/${examId}`);
                })
            })

        },
        methods: {

            lookDeatils: function (e) {
                app.router.navigate(`/lookAnswer/${this.$route.params.id}`);
            },

        },
    }
</script>
<style scoped>


    .exam-content {
        padding: 20px;
    }

    .result-name {
        font-size: 14px;
    }

    .exam-details {
        background-color: #fff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px 20px 0 20px;
    }

    .exam-details img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
.passcolor{
    color: #69BA71!important;
}
.nopasscolor{
    color: #E07762!important;
}
    .exam-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #F1F1F1;
        color: #999999;
        padding: 20px;
        font-size: 14px;
        margin: 0 -20px;
    }

    .exam-result div p:nth-child(2) {
        font-size: 16px;
        color: #333333;
    }

    .exam-total {
        margin: 30px 0 30px;
        background: url(./img/answer.png) no-repeat;
        height: 99px;
        background-size: contain;
        line-height: 99px;
        font-size: 16px;
    }

    .exam-total span {
        font-size: 44px;
    }
    .exam-typename {
        margin: 30px 0;
    }

    .tip {
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        margin-top: 20px;
    }

    .exam-name {
        border-bottom: 1px solid rgba(153, 153, 153, 1);
        margin: 0 -20px;
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 20px;
    }

    .look-answer button {
        border: 0;
        background-color: #2471CA;
        color: #FFFFFF;
        height: 44px;
        line-height: 44px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .link {
        color: #000000;
        font-size: 30px;
    }

    .swiper-container {
        height: calc(100% - 102px);
    }

    .swiper-slide {
        width: 100% !important;
        height: 100%;
    }

    .swiper-slide-inner {
        padding: 0 20px;

        height: calc(100% - 40px);
        overflow-y: auto;
        margin: 20px 20px 0;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
    }

    .swiper-slide-inner img {
        width: 80%;
    }

    .item-resources {
        text-align: center;
    }

    .answer-items li {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .answer-items li .item-answer-l {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #000000;
        border: 1px solid #ddd;
    }

    .item-radio-l {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 50%;
        margin-right: 25px;
    }

    .multiple-topics .item-radio-l {
        border-radius: 0%;
    }

    .item-radio-r {
        flex: 1;
    }

    .item-radio-select-error {
        background-color: #E07762;
        color: #FFFFFF;
    }

    .item-radio-select-success {
        background-color: #69BA71;
        color: #FFFFFF;
    }

    .item-radio-select-no {
        background-color: #FFFFFF;
        color: #000;
    }

    .item-answer-result {
        text-align: center;
        background: rgba(241, 241, 241, 1);
        border-radius: 4px;
        height: 35px;
        line-height: 35px;
    }

    .item-answer-result-error {
        color: #E07762;
    }

    .item-answer-result-success {
        color: #000;
    }

    .exam-type {
        margin: 20px 0;
    }

    .exam-type span:nth-child(1) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 16px;
        color: rgba(36, 113, 202, 1);

    }

    .exam-type span:nth-child(2) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 20px;
        color: rgba(36, 113, 202, 1);

    }

    .slideAllAnswer {
        text-align: center;
        height: 44px;
        line-height: 44px;
        background: rgba(241, 241, 241, 1);
        font-size: 14px;
    }

    .slideAllAnswer span:nth-child(1) {
        color: rgba(36, 113, 202, .6);
        margin-right: 10px;
    }

    .slideAllAnswer span:nth-child(2) {
        color: #000000;
        margin-left: 10px;
    }

    .video-content-hide {
        display: none;
    }

    .video-content {
        position: relative;
    }

    .video-content i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
    }
</style>